<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>个人信息</title>
    <link rel="stylesheet" href="../../bower_components/font-awesome/css/font-awesome.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">

    <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/2.3.2/css/bootstrap.min.css">

    <link rel="stylesheet" href="../../outlink/selectpage.css" type="text/css">

    <link rel="stylesheet" href="../../outlink/demo.css"/>

    <link rel="stylesheet" href="../../outlink/pagination.css"/>
</head>
<style>
    body {
        background-image: url("../../outlink/img/plane_myths_big.jpg");
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 1000px;
        z-index: -10;
        zoom: 1;
        background-color: #fff;
        background-repeat: no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-position: center 0;
    }
</style>
<body>

<div>
    <h3>
        <a th:href="@{/index/user1}">查看个人信息</a><br>
        <a th:href="@{/index/user3}">查看历史需求信息</a><br>
        <a th:href="@{/index/hello2}">去订票</a><br><br>
    </h3>
</div>

<div class="top" style="height:35px;width: 100%;">
    <div class="loginSuccess" id="loginSuccess" style="float: right;margin-right: 10px;margin-top: 10px">
        <!--登录成功后显示用户信息-->
    </div>
</div>
<div class="middle" style="margin-left: 40%">
    <section style="width:30%;float: left">
        <center><span style="font-size: 35px;">个人订单</span>
            <table border="1" id="res" class="table table-bordered table-hover" style="margin-top: 15px">
                <tr>
                    <th style="width:20%">航班名称</th>
                    <th style="width:20%">排</th>
                    <th style="width:20%">列</th>
                </tr>
                <tbody id="userOrder">

                </tbody>
            </table>
            <!--分页-->
            <div class="m-style M-box11" id="userOrder_fy"></div>
        </center>

    </section>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../outlink/jquery.pagination.js"></script>
<script src="../../outlink/jquery.cookie.js"></script>
<script th:inline="javascript">
    var isCookie = $.cookie('username'); // 读取"userName"的cookie值
    //网页加载时运行
    window.onload = function () {
        var html = "";     //添加用户信息
        html += " <span class=\"hidden-xs\" style='font-size:30px ' >欢迎您,&nbsp;</span>";
        html += " <span class=\"hidden-xs userinfo\" id=\"uname\" style='color: black;font-size:30px '>" + isCookie + "</span>";
        html += "   ";
        html += "<input type=\"button\" id=\"loginoutbtn\" class=\"btn btn-info \" value=\"退出\" />";
        $('#loginSuccess').html(html);
        dopage_userOrder(1);   //执行订单分页
        dopage_userDemand(1);   //执行需求分页

        //退出操作
        $('#loginoutbtn').click(function () {
            console.log("已退出");
            $.cookie("username", "", -1);  //退出时删除cookie并刷新网页
            window.location.href = "../index/plane"; //跳转首页
        })
    }

    //订单分页方法
    function dopage_userOrder(page) {
        var p_userOrder = {"str": isCookie, "pageNum": page}
        $.ajax({
            type: "post",
            url: "../userinfo/selectOrder",
            data: JSON.stringify(p_userOrder),
            contentType: "application/json; charset=utf-8",
            type: "json",       //后台处理后返回的数据格式
            success: function (result) {//ajax请求成功后触发的方法
                console.log('请求成功');
                console.log(result);
                var order_yeshu = result.lastPage;
                //分页
                $('#userOrder_fy').pagination({
                    mode: 'fixed',
                    pageCount: order_yeshu,
                    current: page,
                    callback: function (api) {
                        dopage_userOrder(api.getCurrent());
                    }
                });
                var html = "";
                var listall = result.list  //后端返回用户订单数组
                if (listall.length > 0) {   //展示
                    $.each(listall, function (index, value) {  //循环遍历listAll 并添加html标签
                        html += "<tr>";
                        html += "<td>";
                        html += value.selectOrderResultMap.plane_name;
                        html += "</td>";
                        html += "<td>";
                        html += value.selectOrderResultMap.seat_locationx + "排";
                        html += "</td>";
                        html += "<td>";
                        html += value.selectOrderResultMap.seat_locationy + "列";
                        html += "</td>";
                        html += "</tr>";
                    });
                    $("#userOrder").html(html);
                } else {
                    alert("您暂无订单记录");
                    $("#userOrder").html(html);
                }
            },
            error: function () {
                alert("查询失败，请重试");
            }
        });
    }

</script>
</html>